<template>
  <div class="tagCheckboxWrapper">
    <a-checkable-tag v-model="useAllChecked" @change="handleChange2">不限</a-checkable-tag>
    <span v-for="(item,index) in useOptions" :key="index">
      <a-checkable-tag v-model="item.active" @change="handleChange">{{ item.label }}</a-checkable-tag>
    </span>
  </div>
</template>
<script>
import { commonProps } from '../_util/util'
export default {
  props: Object.assign({}, commonProps, {
    options: {
      type: Array,
      default: function() { return [] },
      required: false
    },
    initialValue: {
      type: Array,
      default: function() { return [] },
      required: false
    },
    allChecked: {
      type: Boolean,
      default: true,
      required: false
    }
  }),
  data() {
    return {
      isChecked: this.initialValue || [],
      useOptions: this.options
    }
  },
  computed: {
    useAllChecked: {
      get() {
        return !this.isChecked.length
      },
      set(val) {
        // this.allChecked = val
      }

    }

  },
  created() {
    this.formItemId && this.form.getFieldDecorator(this.formItemId, this.formOptions)
  },
  methods: {
    handleChange(val) {
      const isChecked = this.useOptions.filter((item) => item.active)
      this.isChecked = isChecked.map(({ field }) => field)
      this.formItemId && this.form.setFieldsValue({ [this.formItemId]: this.isChecked })
    },
    handleChange2() {
      this.useOptions.forEach((item) => { item.active = false })
      this.isChecked = []
      this.formItemId && this.form.setFieldsValue({ [this.formItemId]: this.isChecked })
    }
  }
}
</script>
